<template>
  <van-nav-bar title="商品分类" />

  <div class="type">
    <div class="list">
      <div class="item" v-for="item in TypeList" :key="item.id">
        <router-link :to="{ path: '/product', query: { typeid: item.id } }">
          <div class="thumb">
            <img :src="item.thumb_text" />
          </div>
          <div class="name">{{ item.name }}</div>
        </router-link>
      </div>

      <van-back-top :bottom="'80'" />
    </div>
  </div>
</template>

<script setup>
// this代理
const { proxy } = getCurrentInstance();
// 响应式数据 分类列表
const TypeList = ref([]);
// 挂载前钩子
onBeforeMount(() => {
  GetTypeData();
});
// 获取初始数据
const GetTypeData = async () => {
  // 发起请求
  let result = await proxy.$http.post({
    url: "/product/type",
  });
  // 处理请求结果
  if (result.code === 1) {
    TypeList.value = result.data;
  } else {
    proxy.$fail(result.msg);
  }
};
</script>

<style scoped>
@import url("/assets/css/ProductType.css");
</style>